<template>
    <mt-popup
            v-model="popupVisibleShow"
            position="bottom">
                <!--二级城市联动选择-->
                <pr-row class="area--title">
                    <pr-col hor="center" @handleClick="cancel">取消</pr-col>
                    <pr-col hor="center" @handleClick="ensureSel">确定</pr-col>
                </pr-row>
                <mt-picker :slots="addressSlots" @change="onAddressChange" :visible-item-count="5"></mt-picker>
    </mt-popup>
</template>
<style lang="less" scoped>
    @import "./../../assets/css/variable_gather";
    .area--title{
        padding: .1rem 0;
        .font-dpr(16px);
    }
</style>
<script>
    import {addressTwo} from 'util/lib/baseData'
    export default{
        props: {
           popShow: {
                type: Boolean,
                default: true
            },
            region: {
                type: String,
                default: ''
            },
            id: {
                type: String,
                default: 'three-area-picker'
            }
        },
        data(){
            return{
                popupVisible: false,
                addressSlots: [
                  {
                    flex: 1,
                    values: Object.keys(addressTwo),
                    className: 'slot1',
                    textAlign: 'center'
                  }, {
                    divider: true,
                    content: '-',
                    className: 'slot2'
                  }, {
                    flex: 1,
                    values: ['北京'],
                    className: 'slot3',
                    textAlign: 'center'
                  }
                ],
                addressProvince: '北京',
                addressCity: '北京'
            }
        },
        components:{

        },
        computed:{
            popupVisibleShow() {
                this.popupVisible = this.popShow
                return this.popupVisible
            }
        },
        methods:{
            onAddressChange(picker, values) {
                picker.setSlotValues(1, addressTwo[values[0]]);
                this.addressProvince = values[0];
                this.addressCity = values[1];
            },
            cancel() {
                this.popupVisible = false;
                this.addressProvince = this.addressCity = '';
                this.$emit('selAreaCancel');
            },
            ensureSel() {
                this.popupVisible = false;
                let realArea = '';
                if(!_.isEmpty(this.addressProvince) && this.addressProvince !== '请选择'){
                    if(!_.isEmpty(this.addressCity) && this.addressCity !== '请选择'){
                        realArea = `${this.addressProvince},${this.addressCity}`;
                    }else {
                        realArea = this.addressProvince;
                    }
                }else {
                     realArea = ''
                }
                this.$emit('selAreaSuccess',realArea)
            }
        },
        created(){

        },
        mounted(){

        }
    }
</script>
